<template>
	<el-container class="eid-management-container">
		<el-card class="eid-management-card">
			<h2>文章管理</h2>
			<el-button type="primary" @click="showDialog = true"
				>新增</el-button
			>
			<el-table :data="list" style="width: 100%; margin-top: 20px">
				<el-table-column
					prop="username"
					label="用户名"
				></el-table-column>
				<el-table-column prop="password" label="密码"></el-table-column>
				<el-table-column prop="role" label="权限">
					<template #default="scope">
						{{ status.find(i => i.value === scope.row.role).label }}
					</template>
				</el-table-column>

				<el-table-column label="操作">
					<template #default="scope">
						<el-button type="text" @click="viewDetails(scope.row)"
							>修改</el-button
						>
						<el-button @click="del(scope.row)" type="text"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="pagination"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pager.page"
				:page-sizes="[1, 10, 20, 30, 40]"
				:page-size="pager.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pager.total"
			/>
		</el-card>
		<el-dialog
			v-if="showDialog"
			title="增加/修改"
			v-model="showDialog"
			@close="cancel"
		>
			<el-form :model="selectedModel" label-width="120px">
				<el-form-item label="用户" prop="username">
					<el-input v-model="selectedModel.username"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="password">
					<el-input v-model="selectedModel.password"></el-input>
				</el-form-item>
				<el-form-item label="权限" prop="role">
					<el-select v-model="selectedModel.role">
						<el-option
							v-for="item in status"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="submit">提交申请</el-button>
			</div>
		</el-dialog>
	</el-container>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as api from "@/api/user.js";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import upload from "@/components/upload";
const store = useStore();
const status = [
	{
		value: "2",
		label: "管理员",
	},
	{
		value: "1",
		label: "用户",
	},
];
const showDialog = ref(false);
const selectedModel = ref({});
const list = ref([]);
const open = () => {
	showDialog.value = true;
};
const viewDetails = item => {
	selectedModel.value = { ...item };
	open();
	// 实现查看申请详情的逻辑
};
const cancel = () => {
	showDialog.value = false;
	selectedModel.value = {};
};
const submit = async () => {
	const fn = selectedModel.value.id ? api.update : api.create;
	const { userInfo } = store.state;
	const res = await fn({
		...selectedModel.value,
	});
	if (res) {
		cancel();

		ElMessage.success(res.message);
		await getList();
	}
};

const pager = ref({
	page: 1,
	limit: 10,
	total: 0,
});
const handleSizeChange = newSize => {
	pager.value.limit = newSize;
	pager.value.page = 1; // Reset to first page on size change
	getList();
};

const handleCurrentChange = newPage => {
	pager.value.page = newPage; // Reset to first page on size change
	getList();
};
const getList = async () => {
	const { data, limit, page, total } = await api.getList({
		...pager.value,
		params: {},
	});
	pager.value = {
		page,
		limit,
		total,
	};
	list.value = data;
};
const del = async ({ id }) => {
	await api.del({ id });
	await getList();
};
const update = async (item, approvalStatus) => {
	await api.update({ ...item, approvalStatus });
	await getList();
};
getList();
</script>

<style scoped>
.eid-management-container {
	padding: 30px;
}

.eid-management-card {
	width: 100%;
}

h2 {
	margin-bottom: 20px;
}

.dialog-footer {
	text-align: right;
}
</style>
